<!-- 在线考试 -->
<template>
  <el-dialog
    title="模拟考试"
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="handleClose"
    :fullscreen="true"
  >
    <div
      style="
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      "
    >
      <div>
        <h1>{{ examinationPlanName }}</h1>
      </div>
      <div style="display: flex; flex-direction: column">
        <div v-if="radioList && radioList.length > 0">
          <el-divider content-position="left"
            ><el-tag>单选题</el-tag></el-divider
          >
          <div v-for="(item, index) in radioList" :key="item.questionId">
            <div>
              <p>{{ item.questionName }}</p>
            </div>
            <div
              v-for="(item2, index2) in item.questionAnswerList"
              :key="index2"
            >
              <el-radio-group
                v-model="radioValue[index]"
                @change="radioChange(item.questionId, radioValue[index], index)"
              >
                <div style="margin-top: 10px; width: 100%">
                  <el-radio :label="item2.questionAnswerOption" border>{{
                    item2.questionAnswerName
                  }}</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div v-if="judgmentList && judgmentList.length > 0">
          <el-divider content-position="left"
            ><el-tag>判断题</el-tag></el-divider
          >
          <div v-for="(item, index) in judgmentList" :key="item.questionId">
            <div>
              <p>{{ item.questionName }}</p>
            </div>
            <div
              v-for="(item2, index2) in item.questionAnswerList"
              :key="index2"
            >
              <el-radio-group
                v-model="judgmentValue[index]"
                @change="
                judgmentChange(item.questionId, judgmentValue[index], index)
                "
              >
                <div style="margin-top: 10px">
                  <el-radio :label="item2.questionAnswerOption" border>{{
                    item2.questionAnswerName
                  }}</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
        </div>

        <div v-if="multipleList && multipleList.length > 0">
          <el-divider content-position="left"
            ><el-tag>多选题</el-tag></el-divider
          >
          <div v-for="(item, index) in multipleList" :key="item.questionId">
            <div>
              <p>{{ item.questionName }}</p>
            </div>
            <div
              v-for="(item2, index2) in item.questionAnswerList"
              :key="index2"
              style="margin-top: 10px"
            >
              <el-checkbox-group
                v-model="multiValue[index]"
                @change="checkboxChange(item.questionId, multiValue[index], index)"
              >
                <el-checkbox :label="item2.questionAnswerOption" border>
                  {{ item2.questionAnswerName }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
        </div>
        <div v-if="fillList && fillList.length > 0">
          <el-divider content-position="left"
            ><el-tag>填空题</el-tag></el-divider
          >
          <div v-for="item in radioList" :key="item.questionId">
            <div>
              <p>{{ item.questionName }}</p>
            </div>

            <div
              v-for="item2 in item.questionAnswerList"
              :key="item2.questionAnswerId"
            >
              <p>{{ item2.questionAnswerOption + item2.questionAnswerName }}</p>
            </div>
          </div>
        </div>
        <div v-if="shortList && shortList.length > 0">
          <el-divider content-position="left"
            ><el-tag>简答题</el-tag></el-divider
          >
          <div v-for="item in radioList" :key="item.questionId">
            <div>
              <p>{{ item.questionName }}</p>
            </div>

            <div
              v-for="item2 in item.questionAnswerList"
              :key="item2.questionAnswerId"
            >
              <p>{{ item2.questionAnswerOption + item2.questionAnswerName }}</p>
            </div>
          </div>
        </div>
      </div>
      <div>
        <el-button @click="submitPaper" type="primary">交卷</el-button>
      </div>
    </div>
    <PaperResult ref="PaperResultRef"></PaperResult>
  </el-dialog>
</template>
<script>
import { getQuestionListByExaminationPlanId } from "@/api/examination/index.js";
import { paperMarkingSimulate } from "@/api/train/index.js";
import PaperResult from "./PaperResult.vue";
export default {
  components: {
    PaperResult,
  },
  data() {
    return {
      dialogVisible: false,
      result: false,
      // 单选题的值
      radioValue: [],
      //判断题的值
      judgmentValue: [],
      //多选选定值
      multiValue:[],
      //填空的值
      fillValue: [],
      //简答题的值
      shortValue: [],
      //总题数
      totalQu: 0,
      //选择的答案
      newResultArr: [],
      startIndex: 0,
      //答题卡
      questionCard: [],

      //单选题已答列表
      radioAnsweredList: [],
      //多选题已答列表
      multipleAnsweredList: [],
      //判断题已答列表
      judgmentAnsweredList: [],

      checkIndex: [],
      paperResult: {},

      disableClick: false,
      radioList: [],
      multipleList: [],
      judgmentList: [],
      fillList: [],
      shortList: [],
      examinationPlanName: "",
      examinationPlanId: 0,
    };
  },
  computed: {},
  created() {},
  methods: {
    //单选框
    radioChange(questionId, value, index) {
      let obj = {
        questionId: questionId,
        chooseAnswer: value,
      };
      this.radioAnsweredList[index] = obj;
      console.log( this.radioAnsweredList)
    },

    //判断题
    judgmentChange(questionId, value, index){
      let obj = {
        questionId: questionId,
        chooseAnswer: value,
      };
      this.judgmentAnsweredList[index] = obj;
      console.log( this.judgmentAnsweredList)
    },
    //多选框的值
    checkboxChange(questionId, value, index) {
      let obj={
        questionId: questionId,
        chooseAnswer: value,
      }
      this.multipleAnsweredList[index] = obj;
      console.log(this.multipleAnsweredList);
    },
    show(row) {
      this.examinationPlanName = row.examinationPlanName;
      this.dialogVisible = true;
      this.examinationPlanId = row.examinationPlanId;
      getQuestionListByExaminationPlanId({
        examinationPlanId: row.examinationPlanId,
      }).then((res) => {
        console.log(res);
        this.radioList = res.data.radioList;
        this.multipleList = res.data.multipleList;
        //处理循环多选框勾选重复问题
        this.multipleList.map((item,index)=>{
          this.multiValue[index]=[];
        })
        
        console.log(this.multiValue);
        this.judgmentList = res.data.judgmentList;
        this.fillList = res.data.fillList;
        this.shortList = res.data.shortList;
      });
    },
    handleClose() {
      this.dialogVisible = false;
      this.clearValue();
    },

    //交卷
    submitPaper() {
      let params = {
        examinationPlanId: this.examinationPlanId,
        answerStr: JSON.stringify(this.radioAnsweredList.concat(this.multipleAnsweredList).concat(this.judgmentAnsweredList)),
        isSimulate: 1, //模拟考试
      };
      paperMarkingSimulate(params).then((res) => {
        if (res.code == 200) {
          //关闭答题页面，展示结果页面
          this.dialogVisible = false;
          this.clearValue();
          this.$refs.PaperResultRef.show(res.data.trainSimulateRecordId, 1);
        }
      });
    },
    clearValue() {
      this.answeredList = [];
      this.radioValue = [];
      this.judgmentValue = [];
    },
  },
};
</script>
<style>
.my-radio {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 20rpx 25rpx;
  box-sizing: border-box;
  border-width: 100px;
  border-color: red;
  margin-top: 10rpx;
}

.my-boder-color-right {
  box-sizing: border-box;
  border: 1rpx solid #5db883;
  background-color: rgba(93, 184, 131, 0.2);
}

.my-boder-color-error {
  box-sizing: border-box;
  border: 1rpx solid #ffe9ea;
  background-color: rgba(255, 233, 234, 0.2);
}
</style>
